<!-- 赛事基础设置 -->
<template>
  <el-form
    ref="api_POST_CompetitionSettingVO"
    v-loading="loading"
    :model="api_POST_CompetitionSettingVO"
    label-width="180px"
    class="train_setting"
    size="mini"
  >
    <el-row :gutter="15">
      <el-col :span="14" :offset="3" class="form_item">
        <el-form-item label="是否订酒店">
          <el-select v-model="api_POST_CompetitionSettingVO.includeHotel" placeholder="请选择是否订酒店" style="width: 100%;">
            <el-option :key="true" :value="true" label="是" />
            <el-option :key="false" :value="false" label="否" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="14" :offset="3" class="form_item">
        <el-form-item label="限制报名人数">
          <el-input-number v-model="api_POST_CompetitionSettingVO.maxEntriesCount" :controls="false" :precision="0" placeholder="请输入" size="mini" controls-position="right" :min="0" />
        </el-form-item>
      </el-col>
      <el-col :span="14" :offset="3" class="form_item">
        <el-form-item label="是否显示会员认证">
          <el-select v-model="api_POST_CompetitionSettingVO.isCTAMemberRequired" placeholder="请选择" style="width: 100%;">
            <el-option :key="true" :value="true" label="是" />
            <el-option :key="false" :value="false" label="否" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="14" :offset="3" class="form_item">
        <el-form-item label="是否显示中跆协级段位认证">
          <el-select v-model="api_POST_CompetitionSettingVO.isCTABeltRequired" placeholder="请选择" style="width: 100%;">
            <el-option :key="true" :value="true" label="是" />
            <el-option :key="false" :value="false" label="否" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="14" :offset="3" class="form_item">
        <el-form-item label="是否显示国际跆协段位认证">
          <el-select v-model="api_POST_CompetitionSettingVO.isWTABeltRequired" placeholder="请选择" style="width: 100%;">
            <el-option :key="true" :value="true" label="是" />
            <el-option :key="false" :value="false" label="否" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="14" :offset="3" class="form_item">
        <el-form-item label="是否涉及会员费">
          <el-select v-model="api_POST_CompetitionSettingVO.includeMembershipFees" placeholder="请选择" style="width: 100%;">
            <el-option :key="true" :value="true" label="是" />
            <el-option :key="false" :value="false" label="否" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="14" :offset="3" class="form_item">
        <el-form-item label="自定义总名称">
          <el-input v-model="api_POST_CompetitionSettingVO.customSettingTitle" placeholder="请输入自定义的总名称（不超过30字）" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-for="(item, index) in api_POST_CompetitionSettingVO.customSettingFieldInputs" :key="index" :gutter="15">
      <el-col :span="14" :offset="3" class="form_item" style="height:auto">
        <el-form-item label="">
          <div class="general_title">
            <el-row :gutter="10">
              <el-col :span="24">
                <el-input v-model="item.name" placeholder="请输入自定义标题名称（不超过30字）" />
              </el-col>
              <el-col :span="7" class="gl_mt_10" style="padding-left:20px">
                <el-radio-group v-model="item.fieldTypeCode" style="width: 100%">
                  <el-radio v-for="jtem in dict.trainningCustomSettingFieldType" :key="jtem.code" :label="jtem.code" style="width:100%;margin-top:10px">{{ jtem.value }}</el-radio>
                </el-radio-group>
              </el-col>
              <el-col :span="17" class="gl_mt_10">
                <div class="radio_text">文本框为不超过200个的字符。</div>
                <div class="radio_text">图片大小为不超过5M的图片。</div>
                <div class="radio_text">附件为仅支持pdf，word格式。</div>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
      </el-col>
      <el-col v-if="api_POST_CompetitionSettingVO.customSettingFieldInputs.length - 1 === index" :span="4" class="form_item">
        <el-button type="default" size="mini" @click="addEntryFields">添加自定义标题</el-button>
      </el-col>
      <el-col v-else :span="4" class="form_item">
        <el-button type="danger" size="mini" @click="deleteEntryFields(index)">删除</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { CopyData, deepCopy } from '@/lib';
import { SiSTKWTrainCreateTrainningSettingInput } from '@/lib/form/train/swaggerForm';
import {
  api_POST_TrainTrainningSetting,
  api_PUT_TrainTrainningSettingByTrainningIdTrainningId,
  api_GET_TrainTrainningSettingByTrainningIdTrainningId
} from '@/extend/api/trainswaggerApi/app';
export default {
  props: {
    gameId: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      api_POST_CompetitionSettingVO: new SiSTKWTrainCreateTrainningSettingInput(),
      // 原始数据
      api_POST_CompetitionSettingVO_old: {},
      api_POST_CompetitionSettingDTO: {}
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
    if (this.gameId) {
      this.getGameSetting().then(() => {
        CopyData(this.api_POST_CompetitionSettingDTO, this.api_POST_CompetitionSettingVO);
        this.api_POST_CompetitionSettingVO.customSettingFieldInputs = this.api_POST_CompetitionSettingDTO.customSettingFields && this.api_POST_CompetitionSettingDTO.customSettingFields || [];
        this.api_POST_CompetitionSettingVO.customSettingFieldInputs.sort((a, b) => a.sortOrder - b.sortOrder);
        this.addEntryFields();
        this.api_POST_CompetitionSettingVO_old = deepCopy(this.api_POST_CompetitionSettingVO);
      });
    } else {
      this.addEntryFields();
      this.api_POST_CompetitionSettingVO_old = deepCopy(this.api_POST_CompetitionSettingVO);
    }
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 验证当前页面是否经过修改且尚未提交
    validSameData() {
      return new Promise(resolve => {
        if (JSON.stringify(this.api_POST_CompetitionSettingVO_old) === JSON.stringify(this.api_POST_CompetitionSettingVO)) {
          resolve(true);
        } else {
          resolve(false);
        }
      });
    },
    submit() {
      return new Promise((resolve, reject) => {
        this.api_POST_CompetitionSettingVO.trainningId = this.gameId;
        const _api_POST_CompetitionSettingVO = this.handleEntryFieldsWidthSubmit();
        console.log(_api_POST_CompetitionSettingVO);
        const isName = _api_POST_CompetitionSettingVO.customSettingFieldInputs.some((item) => {
          return item.name === '';
        });
        if (isName) {
          this.$message({ type: 'error', message: '自定义的标题内容不能为空' });
          reject(error);
        }
        for (let i = 0; i < _api_POST_CompetitionSettingVO.customSettingFieldInputs.length; i++) {
          const item = _api_POST_CompetitionSettingVO.customSettingFieldInputs[i];
          item.sortOrder = i;
        }
        if (this.api_POST_CompetitionSettingDTO.id) {
          this.editGameSetting(_api_POST_CompetitionSettingVO).then(res => {
            resolve(res);
          }, error => {
            reject(error);
          });
        } else {
          this.addGameSetting(_api_POST_CompetitionSettingVO).then(res => {
            resolve(res);
          }, error => {
            reject(error);
          });
        }
      });
    },
    // 处理提交时自定义字段中为空的情况
    handleEntryFieldsWidthSubmit() {
      const api_POST_CompetitionSettingVO = deepCopy(this.api_POST_CompetitionSettingVO);
      api_POST_CompetitionSettingVO.customSettingFieldInputs = api_POST_CompetitionSettingVO.customSettingFieldInputs.filter(item => item.name);
      return api_POST_CompetitionSettingVO;
    },
    // 新增自定义字段
    addEntryFields() {
      const entryFieldItem = {
        name: '',
        fieldTypeCode: 'Text',
        trainningSettingId: '',
        sortOrder: 0
      };
      this.api_POST_CompetitionSettingVO.customSettingFieldInputs.push(entryFieldItem);
    },
    // 删除自定义字段
    deleteEntryFields(index) {
      this.api_POST_CompetitionSettingVO.customSettingFieldInputs.splice(index, 1);
    },
    // 根据赛事id获取赛事配置
    getGameSetting() {
      return new Promise((resolve, reject) => {
        this.loading = true;
        api_GET_TrainTrainningSettingByTrainningIdTrainningId(this.gameId, { includeCustomSettingFields: true }).then(res => {
          this.loading = false;
          this.api_POST_CompetitionSettingDTO = res || {};
          resolve(res);
        }, error => {
          this.loading = false;
          reject(error);
          this.$message({ type: 'error', message: '获取赛事基础设置失败！' });
        });
      });
    },
    // 新增赛事基础设置
    addGameSetting(api_POST_CompetitionSettingVO) {
      return new Promise((resolve, reject) => {
        api_POST_TrainTrainningSetting(api_POST_CompetitionSettingVO).then(res => {
          resolve(res);
          this.$message({ type: 'success', message: '新增赛事基础设置成功！' });
          this.api_POST_CompetitionSettingVO_old = deepCopy(this.api_POST_CompetitionSettingVO);
          this.api_POST_CompetitionSettingDTO = res || {};
        }, error => {
          reject(error);
          this.$message({ type: 'error', message: '新增赛事基础设置失败！' + (error.error && error.error.message || '') });
        });
      });
    },
    // 更新赛事基础设置
    editGameSetting(api_POST_CompetitionSettingVO) {
      return new Promise((resolve, reject) => {
        api_PUT_TrainTrainningSettingByTrainningIdTrainningId(this.gameId, api_POST_CompetitionSettingVO).then(res => {
          resolve(res);
          this.$message({ type: 'success', message: '更新赛事基础设置成功！' });
          this.api_POST_CompetitionSettingVO_old = deepCopy(this.api_POST_CompetitionSettingVO);
        }, error => {
          reject(error);
          this.$message({ type: 'error', message: '更新赛事基础设置失败！' + (error.error && error.error.message || '') });
        });
      });
    }
  }
};
</script>
<style scoped>
  .general_title{
    width: 100%;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    padding: 10px 20px;
  }
  .radio_text{
    font-size: 12px;
    color: #888;
    margin-top: 10px;
    line-height: 17px;
  }
</style>
